<template>
  <div>
    <el-form class="form" ref="form" :model="info" :rules="rules" label-width="80px">
      <el-form-item :label="`选择${typestr}`" prop="quests">
        <el-transfer v-model="info.quests" :titles="['未选择', '已选择']" :data="choiceList"/>
      </el-form-item>
      <el-form-item label="修改参数">
        <div class="line">
          <el-select v-model="changing">
            <div slot="prefix" class="select-prefix">
              <div>#</div>
            </div>
            <el-option v-for="id in info.quests" :key="id" :value="id">
              <span>#{{ id }}</span>
            </el-option>
          </el-select>
          <el-select v-model="changingConfig">
            <el-option v-for="config in changingConfigList" :key="config" :value="config" :label="config"/>
          </el-select>
          <el-button @click="addChange">添加</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-form class="indent" label-position="left" label-width="200px">
      <el-form-item
        v-for="(change, k) in changes"
        :key="k"
        :label="`#${change.id} : ${change.key}`">
        <div class="line">
          <typed-input v-model="change.value"/>
          <el-button type="danger" @click="removeChange(k)">删除</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import TypedInput from '../TypedInput'

export default {
  components: {
    TypedInput
  },
  props: {
    queue: Array,
    model: String,
    type: Number
  },
  data() {
    return {
      info: {
        quests: []
      },
      rules: {
        quests: [{ type: 'array', required: true, message: '请至少选择一个任务', trigger: 'none' }],
      },
      changing: null,
      changingConfig: null,
      changes: []
    }
  },
  computed: {
    typestr() {
      return this.type == 2 ? '攻击' : '防御'
    },
    choiceList() {
      const list = []
      for (const quest of this.queue) {
        if (quest.name == this.model && quest.type == this.type) {
          list.push({ key: quest.id, label: `#${quest.id} - ${quest.method} - ${quest.desc}` })
        }
      }
      return list
    },
    changingConfigList() {
      if (this.changing == null) {
        return []
      }
      const quest = this.queue.find(q => q.id == this.changing)
      if (!quest) {
        return []
      }
      return Object.keys(quest.config)
    }
  },
  methods: {
    addChange() {
      const id = this.changing, key = this.changingConfig
      if (id == null || key == null) {
        this.$message('未选择任务或参数')
        return
      }
      if (this.changes.find(c => c.id == id && c.key == key)) {
        this.$message('修改已存在')
        return
      }
      const quest = this.queue.find(q => q.id == id)
      if (!quest) {
        this.$message('任务不存在')
        return
      }
      this.changes.push({ id, key, value: quest.config[key] })
    },
    removeChange(ind) {
      this.changes.splice(ind, 1)
    },
    validate() {
      return this.$refs.form.validate()
    },
    submit() {
      return { quests: this.info.quests, changes: this.changes }
    },
    loadConfig(config) {
      this.info.quests = config
    },
    deleteQuest(id) {
      let ind
      ind = this.info.quests.indexOf(id)
      if (ind >= 0) {
        this.info.quests.splice(ind, 1)
      }
      if (this.changing == id) {
        this.changing == null
        this.changingConfig == null
      }
      ind = this.changes.findIndex(c => c.id == id)
      if (ind >= 0) {
        this.changes.splice(ind, 1)
      }
    }
  }
}
</script>

<style scoped>
.form {
  margin-top: 20px;
}

.indent {
  margin-left: 50px;
}

.line {
  display: flex;
  justify-content: space-between;
}
</style>
